<template>
  <div
    class="flex flex-wrap gap-[20px] text-white font-semibold items-center justify-center text-[20px]"
  >
    <a
      v-if="isShowRandom"
      href="#"
      class="border-[2px] cursor-pointer flex-center h-[60px] gap-[10px] bg-[#ffffff50] border-[#ffffff50] border-solid w-full max-w-btn rounded-[40px]"
      @click="randomClick"
    >
      <XMImg
        :src="icon3"
        class="size-[30px] object-contain"
      />
      <div>Random Game</div>
    </a>
    <div
      v-if="isShowBackToTop"
      @click="handleScrollToTop"
      class="flex-center cursor-pointer gap-[10px] h-[60px] w-full max-w-btn rounded-[40px] bg-[#00000070]"
    >
      <XMImg
        :src="icon4"
        class="size-[20px] object-contain"
      />
      <div>Back To Top</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import icon3 from "~/public/img/icon3.png";
import icon4 from "~/public/img/icon4.png";
import { useGA } from "~/composables/useGA";

const { isShowBackToTop = true, isShowRandom = true } = defineProps<{
  /**
   * 是否显示随机游戏按钮
   * @default true
   */
  isShowRandom?: boolean;
  /**
   * 是否显示返回顶部按钮
   * @default true
   */
  isShowBackToTop?: boolean;
}>();
const { trackEvent } = useGA();

/** 返回顶部 */
const handleScrollToTop = () => {
  document.querySelector("#nuxtBoxTag")?.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

/** 随机选择一个游戏id */
const randomClick = async (event: MouseEvent) => {
  event.preventDefault();
  const gameDetail = await getRandomGameDatail();
  const { id } = gameDetail;
  trackEvent({
    eventName: "Click_Random",
  });
  window.location.href = getTargetUrl(`/gameDetail?gameId=${id}`);
};
</script>

<style scoped></style>
